<template>
  <div>
    <div id="print-content">
      <h1 class="title">打印内容</h1>
      <table class="table">
        <tr>
          <th>单位名称</th>
          <td>
            <el-input
              v-show="!isPrint"
              v-model="form.componey"
              placeholder=""
            ></el-input>
            <div v-show="isPrint">{{ form.componey }}</div>
          </td>
          <th>项目名称</th>
          <td>
            <el-input
              v-show="!isPrint"
              v-model="form.name"
              placeholder=""
            ></el-input>
            <div v-show="isPrint">{{ form.name }}</div>
          </td>
          <td class="no_print"></td>
        </tr>

        <tr>
          <th>序号</th>
          <th>业务类型</th>
          <th colspan="2">业务描述</th>
          <td class="no_print">
            <el-button @click="add" type="primary" size="mini">add</el-button>
          </td>
        </tr>
        <tr v-for="(item, index) in list" :key="index">
          <th>
            <div>{{ ++index }}</div>
          </th>
          <td>
            <el-input
              v-show="!isPrint"
              v-model="item.type"
              placeholder="请输入"
            />
            <div v-show="isPrint">{{ item.type }}</div>
          </td>
          <td colspan="2">
            <el-input
              v-show="!isPrint"
              v-model="item.name"
              placeholder="请输入"
            />
            <div v-show="isPrint">{{ item.name }}</div>
          </td>
          <td class="no_print">
            <el-button @click="del(index)" type="warning" size="mini"
              >del</el-button
            >
          </td>
        </tr>
      </table>
    </div>
    <el-button @click="printTable" type="primary">打印</el-button>
    <el-button @click="toImg" type="primary">img</el-button>
  </div>
</template>
<script>
import html2canvas from "html2canvas";
export default {
  name: "PrintTable",
  data() {
    return {
      form: {
        componey: "31677部队幼儿园（八一幼儿园）",
        name: "雕刻、安装",
      },
      isPrint: false,
      list: [
        {
          name: "设计制作",
        },
      ],
    };
  },

  methods: {
    toImg() {
      var shareContent = document.querySelector("#print-content");
      var width = shareContent.offsetWidth;
      var height = shareContent.offsetHeight;
      var canvas = document.createElement("canvas");
      var scale = 2;

      canvas.width = width * scale;
      canvas.height = height * scale;
      canvas.getContext("2d").scale(scale, scale);

      var opts = {
        scale: scale,
        // canvas: canvas,
        // logging: true,
        // width: width,
        // height: height
      };
      html2canvas(document.querySelector("#print-content"), opts).then(
        (canvas) => {
          //   // console.log('canvas', canvas)
          //   // canvas.width /= 2
          //   // canvas.height /= 2
          document.body.appendChild(canvas);
        }
      );
    },
    add() {
      this.list.push({
        name: "张三",
      });
    },
    del(index) {
      this.list.splice(index, 1);
    },
    printTable() {
      this.isPrint = true;

      setTimeout(() => {
        // 获取需要打印的内容
        const content = document.getElementById("print-content").innerHTML;
        // 创建一个 iframe 并设置其内容
        const iframe = document.createElement("iframe");
        iframe.style.position = "fixed";
        iframe.style.top = 0;
        iframe.style.left = 0;
        iframe.style.width = "100%";
        iframe.style.height = "100%";
        iframe.style.zIndex = 9999;
        document.body.appendChild(iframe);
        const iframeDoc = iframe.contentWindow.document;
        iframeDoc.open();
        iframeDoc.write(`
        <html>
          <head>
            <title>打印内容</title>
            <style>
              /* 添加打印样式 */
              body {
                font-family: Arial, sans-serif;
              }
              .no_print{
                display: none;
              }
                .table {
  margin: 0 auto;
  border-collapse: collapse;
}

.table td {
  width: 100px;
  border: 1px solid #ebeef5;
}

.table th {
  width: 100px;
  border: 1px solid #ebeef5;
  font-size: 14px;
  background-color: #fafafa;
  color: #909399;
  line-height: 1.5em;
}

.table tr td:last-child {
  border: none;
}

.table tr td div {
  text-align: center;
  font-size: 12px;
}

            </style>
          </head>
          <body>
            ${content}
          </body>
        </html>
      `);
        iframeDoc.close();
        // 打印 iframe 内容
        iframe.contentWindow.print();
        // 打印完成后移除 iframe
        iframe.onload = function () {
          setTimeout(function () {
            document.body.removeChild(iframe);
          }, 100);
        };
        // this.isPrint = false;
      }, 100);
    },
  },
};
</script>
<style scoped src="./PrintTable.css"></style>
